<template>
  <div class="w-full py-[24px]">
    <navBar class=""></navBar>
    <div class="m-auto w">
      <!-- banner -->
      <div class="flex mt-[24px]">
        <div class="banner-wrapper rounded-[8px] overflow-hidden mr-[24px]">
          <n-carousel trigger="hover" autoplay show-arrow>
            <img
              v-for="(item, i) in banners"
              :key="i"
              class="w-full cursor-pointer"
              :src="item.imgUrl"
              @click="goUrl(item.link)"
            />
            <template #arrow="{ prev, next }">
              <div class="banner-arrow left" @click="prev">
                <n-icon>
                  <ChevronBack></ChevronBack>
                </n-icon>
              </div>
              <div class="banner-arrow right" @click="next">
                <n-icon>
                  <ChevronForward></ChevronForward>
                </n-icon>
              </div>
            </template>
            <template #dots="{ total, currentIndex, to }">
              <div class="absolute bottom-[10px] flex w-full">
                <div class="dot-wrapper">
                  <div
                    :class="i == currentIndex + 1 ? '!bg-[--main-color]' : ''"
                    v-for="i in total"
                    :key="i"
                    @mouseenter="to(i - 1)"
                  ></div>
                </div>
              </div>
            </template>
          </n-carousel>
        </div>
        <div class="flex-1 banner-right">
          <div class="flex" @click="goArtical('Presentamos Alib2b')">
            <div class="title">
              <div>Presentamos Alib2b</div>
              <div>
                <!-- <n-icon>
                  <ChevronForwardCircle></ChevronForwardCircle>
                </n-icon> -->
                Aprender más
              </div>
            </div>
            <div class="icons">
              <img src="/images/icons/1@1x.png" />
            </div>
          </div>

          <div @click="goArtical('¿Por qué nace Alib2b?')">
            <div class="title">
              <div>¿Por qué nace Alib2b?</div>
              <div>
                <!-- <n-icon>
                  <ChevronForwardCircle></ChevronForwardCircle>
                </n-icon> -->
                Aprender más
              </div>
            </div>
            <div class="icons">
              <img src="/images/icons/5@1x.png" />
            </div>
          </div>

          <div @click="goArtical('Transporte Aéreo')">
            <div class="title">
              <div>Transporte Aéreo</div>
              <div>
                <!-- <n-icon>
                  <ChevronForwardCircle></ChevronForwardCircle>
                </n-icon> -->
                Aprender más
              </div>
            </div>
            <div class="icons">
              <img src="/images/icons/2@1x.png" />
            </div>
          </div>
          <div @click="goArtical('Envío internacional')">
            <div class="title">
              <div>Envío internacional</div>
              <div>
                <!-- <n-icon>
                  <ChevronForwardCircle></ChevronForwardCircle>
                </n-icon> -->
                Aprender más
              </div>
            </div>
            <div class="icons">
              <img src="/images/icons/4@1x.png" />
            </div>
          </div>

          <div @click="goArtical('OEM/ODM')">
            <div class="title">
              <div>OEM / ODM</div>
              <div>
                <!-- <n-icon>
                  <ChevronForwardCircle></ChevronForwardCircle>
                </n-icon> -->
                Aprender más
              </div>
            </div>
            <div class="icons">
              <img src="/images/icons/3@1x.png" />
            </div>
          </div>
        </div>
      </div>

      <!-- 购物步骤 -->
      <div class="flex items-baseline w-full gap-2 overflow-hidden banner-bottom">
        <div>
          <div>
            <div>1</div>
            <div class="font-[300]">
              Alib2b es socio oficial de 1688.com by Alibaba en México
              <span
                class="text-[--main-color] cursor-pointer"
                @click="bus.emit('showLoginDialog')"
                >{{ $t("button.facebook登录") }}
              </span>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div>2</div>

            <div class="font-[300]">
              Añada los productos deseados a su carrito y realice su pedido
            </div>
          </div>
        </div>
        <div>
          <div>
            <div>3</div>

            <div class="font-[300]">
              Confirme su pedido con el servicio de atención al cliente y elija entre
              diversos servicios adicionales
            </div>
          </div>
        </div>
        <div>
          <div>
            <div>4</div>

            <div class="font-[300]">
              Alib2b le ofrece diversas formas de pago convenientes para sus transacciones
            </div>
          </div>
        </div>
        <div>
          <div>
            <div>5</div>

            <div class="font-[300]">
              que le ofrece soluciones integrales para sus procesos de compra, logística e
              importación a México
            </div>
          </div>
        </div>
      </div>

      <!-- 热门精选 -->
      <div class="super-deals flex gap-[30px] mt-[16px]">
        <template v-for="i in 2" :key="i">
          <superDeals
            v-if="recommendCate.length > i"
            :mainCategory="recommendCate[i - 1]"
          ></superDeals>
        </template>

        <!-- <superDeals :keywords="'Ropa de hombre'"></superDeals> -->
      </div>

      <template v-for="i in recommendCate.length" :key="i">
        <div class="mt-[40px]">
          <categoryFloor
            v-if="i > 2"
            :mainCategory="recommendCate[i - 1]"
          ></categoryFloor>
        </div>
      </template>

      <!-- <div class="mt-[40px]">
        <categoryFloor :keywords="'Ropa de mujer'"></categoryFloor>
      </div>
      <div class="mt-[40px]">
        <categoryFloor :keywords="'Ropa de hombre'"></categoryFloor>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, toRefs } from "vue";
import { ChevronBack, ChevronForward, ChevronForwardCircle } from "@vicons/ionicons5";
import categoryFloor from "@/components/categoryFloor";
import superDeals from "@/components/superDeals";
import navBar from "@/components/navBar";
import { getBannerList } from "@/api/common";
import { useUser } from "@/stores/user";
import { goArtical } from "@/utils/common";
import bus from "@/utils/mitt";
const subTitleClass = "text-[16px]";
const { category } = toRefs(useUser());
// import bus from "@/utils/mitt";
const banners = ref([]);
const goUrl = (url) => {
  if (url) window.open(url, "_blank");
};

const recommendCate = computed(() => {
  return category.value.filter((x) => x.recommend);
});

onMounted(async () => {
  const { data: bannerRes } = await getBannerList();
  banners.value = bannerRes.data;
  if (!banners.value || banners.value.length == 0) {
    banners.value = [
      {
        imgUrl: "/images/banner/1.jpg",
        link: `/#/artical/content/${encodeURIComponent("¿Por qué nace Alib2b?")}`,
      },
      {
        imgUrl: "/images/banner/2.png",
        link: `/#/artical/content/${encodeURIComponent("OEM/ODM")}`,
      },
      {
        imgUrl: "/images/banner/3.jpg",
        link: `/#/artical/content/${encodeURIComponent("Envío internacional")}`,
      },
      {
        imgUrl: "/images/banner/4.jpg",
        link: `/#/artical/content/${encodeURIComponent("Transporte Aéreo")}`,
      },
    ];
  }
});
</script>

<style lang="scss" scoped>
.banner-right {
  > div {
    background-color: #fff;
    // height: 100px;
    // width: 338px;
    margin-top: 25px;
    display: flex;
    border-radius: 10px;
    border: 1px solid var(--sub-color);
    cursor: pointer;
    color: #5c5c5c;
    transition: all 0.3s ease-in-out;
    font-weight: 400;
    display: flex;
    .title {
      flex: 1;
      padding-left: 16px;
      > div:first-child {
      }
      > div:last-child {
        display: flex;
        align-items: center;
        font-size: 16px;
        margin-top: 6px;
        font-weight: 300;
        i {
          font-size: 20px;
          margin-right: 8px;
          color: var(--sub-color);

          transition: all 0.3s ease-in-out;
        }
      }
    }
    .icons {
      // padding: 0 16px;
      // width: 104px;
      // font-size: 0px;
      img {
        width: 100%;
      }
    }
    > div {
      margin: auto;
      // font-size: 20px;
    }
  }
  > div:first-child {
    margin-top: 0px;
  }
  > div:hover {
    background-color: var(--sub-color);
    color: white;
    .title {
      > div:last-child {
        i {
          color: white;
        }
      }
    }
  }
}

.banner-bottom {
  > div {
    // background-color: #fff;
    height: 100px;
    flex: 1;
    display: flex;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;

    > div {
      margin: auto;
      font-size: 14px;
      font-weight: 400;
      display: flex;
      width: 100%;
      gap: 4px;
      color: #303030;
      > div:first-child {
        background-color: #ffae4e;
        color: white;
        border-radius: 100%;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
      }
      > div:last-child {
        flex: 1;
        width: 0;
      }
    }
  }
}

.custom-arrow {
  display: flex;
  position: absolute;
  bottom: 25px;
  right: 10px;
}

.custom-arrow button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-width: 0;
  border-radius: 8px;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-arrow button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.custom-arrow button:active {
  transform: scale(0.95);
  transform-origin: center;
}

.dot-wrapper {
  display: flex;
  margin: auto;
  gap: 30px;
  > div {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: rgb(8 8 8 / 24%);
    cursor: pointer;
    border: 1px solid white;
    // opacity: 0.3;
  }
}
.banner-arrow {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  height: 60px;
  line-height: 60px;
  font-size: 40px;
  color: white;
  padding-top: 4px;

  cursor: pointer;
  &:hover {
    background-color: #3030303f;
  }
  &.left {
    left: 10px;
  }
  &.right {
    right: 10px;
  }
}
</style>
